<template>
    <div class="box-con">
        <div class="con-main">
            <div style="height: 40%;">

                <div class="h4s animate__animated animate__fadeInUp">
                    <div class="tit-l">科技研发/人才需求
                    </div>
                    <div class="tit-r">
                        <div class="searchk">
                            <a-date-picker placeholder="选择年份" picker="year" :allowClear="false" @change="onChange">
                                <template #suffixIcon>
                                    <caret-down-outlined style="color: #02FBFD" />
                                </template>
                            </a-date-picker>
                        </div>
                        <!-- <div class="more">查看更多</div> -->
                    </div>
                </div>
                <div class="main-box animate__animated animate__fadeInUp">
                    <div class="num-box" style="display: flex;flex-direction: row;">
                        <!-- <img src="../../../../../assets/bigScreen/num-img2.png" alt=""> -->
                        <!-- <div class="num-li">
                            <div class="num-li-l">
                                <div>科研机构数量(个)</div>
                            </div>
                            <div class="num-li-r" v-if="organizationCount.length != 0">
                                <div v-for="item in organizationCount">{{ item }}</div>
                            </div>
                            <div class="num-li-r" v-else>
                                <div>0</div>
                            </div>
                        </div> -->
                        <div class="num-li" @click="gotoPath('/bigScreen/demandList',{tabAct:0})">
                            <div class="num-li-l">
                                <div>科技研发需求（个）</div>
                            </div>
                            <!-- <CountTo :startVal='0' :endVal='265' :duration='2000'/> -->
                            <div class="num-li-r color-lv">
                                <div class="num">
                                    <CountTo :startVal='0' :endVal='[demandTechnologyCount.length ? Number(demandTechnologyCount.join("")) : 0]' :separator='false'
                                        :duration='2000' />
                                </div>
                                <div class="numBgBox">
                                    <div v-for="item in demandTechnologyCount.length?demandTechnologyCount.length:1" class="numBg" :key="item">
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="num-li-r" v-else>
                                <div>0</div>
                            </div> -->
                        </div>
                        <div class="num-li" @click="gotoPath('/bigScreen/demandList',{tabAct:1})">
                            <div class="num-li-l">
                                <div>科研人才需求(个)</div>
                            </div>
                            <div class="num-li-r color-lan">
                                <div class="num">
                                    <CountTo :startVal='0' :endVal='[expertCount.length ? Number(expertCount.join("")) : 0]' :separator='false'
                                        :duration='2000' />
                                </div>
                                <div class="numBgBox">
                                    <div v-for="item in expertCount.length?expertCount.length:1" class="numBg" :key="item">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: calc(60% - 10px);margin-top: 10px;">

                <div class="h4s animate__animated animate__fadeInUp">
                    <div class="tit-l">创新联合体统计</div>
                    <div class="tit-r">
                        <!-- <div class="searchk">
                            <a-date-picker placeholder="选择年份" picker="year" :allowClear="false" @change="onChange">
                                <template #suffixIcon>
                                    <caret-down-outlined style="color: #02FBFD" />
                                </template>
                            </a-date-picker>
                        </div> -->
                        <!-- <div class="more">查看更多</div> -->
                    </div>
                </div>
                <div class="main-box animate__animated animate__fadeInUp">
                    <div style="display: flex;justify-content: space-between;align-items: center;height: 100%;">
                        <div class="topTotal" style="width: 30%;height: 100%;">
                            <div class="topTotal-item">
                                <div class="numberBox" style="margin-top: 0.5rem;">
                                    <div v-for="(item, index) in [5, 2]" class="number" style="color: #00EEFD;">
                                        <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                    </div>
                                </div>
                                <div class="topTotal-item-title">创新联合体数量</div>
                            </div>
                        </div>
                        <div style="width: 70%;height: 100%;padding: 1rem 0;">
                            <inputIntensity :xData="inputIntensitylinexData" :sData="inputIntensitylinesData"></inputIntensity>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-main">
            <div class="h4s animate__animated animate__fadeInUp" @click="openInstrument" style="cursor: pointer;">
                <div class="tit-l">大型科研仪器开放共享服务</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="topTotal">
                    <div class="topTotal-item">
                        <div class="numberBox">
                            <div v-for="(item, index) in [5, 4, 1, 8]" class="number" style="color: #00EEFD;">
                                <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                            </div>
                        </div>
                        <div class="topTotal-item-title">大型仪器数量</div>
                    </div>
                </div>
                <div style="height: calc(100% - 9rem);">
                    <fundInvestment></fundInvestment>
                </div>
            </div>
        </div>
        <div class="con-main" @click="jumpNew('https://f.nmkjt.org.cn/nmkjt/sso/authration.action')">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">科技计划项目统计</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="topTotal">
                    <div class="topTotal-item">
                        <div class="numberBox">
                            <div v-for="(item, index) in [9, 0, 9]" class="number" style="color: #00EEFD;">
                                <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                            </div>
                        </div>
                        <div class="topTotal-item-title">项目总数</div>
                    </div>
                    <div class="topTotal-item" style="margin-left: 6rem;">
                        <div class="numberBox">
                            <div v-for="(item, index) in [1, 5, 7, 0, 2, 2]" class="number" style="color: #00EEFD;">
                                <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                            </div>
                        </div>
                        <div class="topTotal-item-title">自治区拨款总数</div>
                    </div>
                </div>
                <div style="height: calc(100% - 9rem);">
                    <twoTriangleBar :xData="linexData" :sData="linesData" :sDataTwo="linesDataTwo"></twoTriangleBar>
                </div>
            </div>
        </div>
        <div class="con-main">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">研发资源</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="lb-box">
                    <div class="lb-box-l">
                        <div class="lbbox-l-t" @click="gotoPath('/bigScreen/resourcesList',{tabAct:1})">
                            <p>现有人才数目</p>
                            <div><CountTo :startVal='0' :endVal='personNumber' :separator='false'
                                        :duration='2000' /></div>
                        </div>
                        <div class="lbbox-l-b" v-if="naturalData.expertList && naturalData.expertList.length != 0">
                            <div class="lbbox-li" v-for="item in naturalData.expertList" @click="toPagePeople(item.id)">
                                <div class="lbbox-imgk">
                                    <img v-if="item.image" :src="item.image.indexOf('http') == -1 ? baseUrl + item.image : item.image" alt="">
                                    <div :title="item.technical">{{ item.technical }}</div>
                                </div>
                                <div class="lbbox-textk">
                                    <h6>{{ item.name }}</h6>
                                    <div>{{ item.unit }}</div>
                                    <div>{{ item.phone }}</div>
                                </div>
                                <div class="tags">{{ item.professionalTitle }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="lb-box-l">
                        <div class="lbbox-l-t lbbox-r-t" @click="gotoPath('/bigScreen/resourcesList',{tabAct:0})">
                            <p>现有平台数量</p>
                            <div><CountTo :startVal='0' :endVal='naturalData.organizationCount' :separator='false'
                                        :duration='2000' /></div>
                        </div>
                        <div class="lbbox-l-b" v-if="naturalData.orgList && naturalData.orgList.length != 0" style="padding: 0 2rem 0 1rem;">
                            <div class="lbbox-li" v-for="item in naturalData.orgList" @click="goOrgDetail(item.id)">
                                <div class="lbbox-imgk">
                                    <img v-if="item.imgUrls" :src="item.imgUrls.indexOf('http') == -1 ? baseUrl + item.imgUrls : item.imgUrls" alt="">
                                    <div :title="item.type" style="background: rgba(250, 81, 81, 0.7);">{{ item.type }}</div>
                                </div>
                                <div class="lbbox-textk">
                                    <h6>{{ item.name }}</h6>
                                    <div>{{ item.address }}</div>
                                    <div>{{ item.industry }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-main">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">研发高地</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="cb-box">
                    <div class="cb-box-t">
                        <div class="cbbox-t-box">
                            <h6>现有研发高地数量</h6>
                            <div class="cbbox-t-numk" v-if="nowCount.length != 0">
                                <div v-for="item in nowCount">{{ item }}</div>
                            </div>
                            <div class="cbbox-t-numk" v-else>
                                <div>0</div>
                            </div>
                        </div>
                        <!-- <div class="cbbox-t-box">
                            <h6>近一月新增数量</h6>
                            <div class="cbbox-t-numk" v-if="monthCount.length != 0" style="color: #02FBFD;">
                                <div v-for="item in monthCount">{{ item }}</div>
                            </div>
                            <div class="cbbox-t-numk" v-else style="color: #02FBFD;">
                                <div>0</div>
                            </div>
                        </div> -->
                    </div>
                    <!-- <div class="cb-box-b"> -->
                    <!-- <h5>浏览次数TOP5</h5>
                        <div class="cbbox-b-con"> -->
                    <div class="cbbox-b-conli" v-for="(item,k) in topFive" @click="toHighland(item.id)">
                        <div v-if="k<5">
                            <h6>
                                <!-- <img v-if="k==0" src="../../../../../assets/bigScreen/sort1.png" alt="">
                                        <img v-if="k==1" src="../../../../../assets/bigScreen/sort2.png" alt="">
                                        <img v-if="k==2" src="../../../../../assets/bigScreen/sort3.png" alt=""> -->
                                <span>{{ item.name }}</span>
                            </h6>
                            <div class="cbbox-b-conli-imgk">
                                <img v-if="item.imgUrl" :src="item.imgUrl.indexOf('http') == -1 ? baseUrl + item.imgUrl : item.imgUrl" alt="">
                                <span v-else style="color:#fff">暂无图片</span>
                            </div>
                            <p>服务类型:{{ item.type }}</p>
                            <!-- <p>所属领域:{{ item.fieldStr }}</p>
                                    <p>所在地点:{{ item.city }}</p> -->
                        </div>
                    </div>
                    <!-- </div> -->
                    <!-- </div> -->
                </div>
            </div>
        </div>
        <div class="con-main">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">研发投入</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp" style="padding: 2rem;">
                <srLines></srLines>
            </div>
        </div>
    </div>
</template>

<script setup>
import srLineArea from '../childComponent/srLineArea.vue'
import twoTriangleBar from '../childComponent/twoTriangleBar.vue'
import inputIntensity from '../childComponent/inputIntensity.vue'
import fundInvestment from '../childComponent/fundInvestment.vue'
import srLines from '../childComponent/srLines.vue'
import { ref, onMounted } from 'vue'
import { CountTo } from 'vue3-count-to'

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const linexData = ref(['科技重大专项计划', '重点研发和成果转化计划', '创新能力提升计划', '基础研究计划'])
const linesData = ref([84, 710, 106, 9])
const linesDataTwo = ref([37124, 50445, 60453, 9000])

const inputIntensitylinexData = ref(['节能环保', '人口健康', '生物技术', '新能源', '养殖业', '冶金建材', '种植业', '装备制造'])
const inputIntensitylinesData = ref([3, 1, 2, 22, 6, 1, 11, 6])
const searchYear = ref(undefined)
const organizationCount = ref([])
const expertCount = ref([0])
const demandTechnologyCount = ref([0])
const technologyCount = ref([])
const personCount = ref([])
const naturalData = ref({})
const nowCount = ref([])
const monthCount = ref([])
const topFive = ref([])
const baseUrl = 'https://test-mkj-hd-new.huaxun.ink'

const personNumber = ref(0)
// getPersonNumber().then(res => {
//     if(res.code == 200) {
//         personNumber.value = res.data
//     }
// })
const  getPersonNumber =()=>{

}

const onChange = (date, dateStr) => {
    searchYear.value = dateStr
    getStaticData()
}
const getStaticData = () => {
    // getStatisticsData({ year: searchYear.value }).then(res => {
    //     if (res.code == 200) {
    //         organizationCount.value = res.data.organizationCount ? res.data.organizationCount.toString().split('') : []
    //         expertCount.value = res.data.expertCount ? res.data.expertCount.toString().split('') : []
    //         demandTechnologyCount.value = res.data.demandTechnologyCount ? res.data.demandTechnologyCount.toString().split('') : []
    //     }
    // })
}
const getData = () => {
    getStaticData()
    // getPersonData().then(res => {
    //     if (res.code == 200) {
    //         technologyCount.value = res.data.technologyCount ? res.data.technologyCount.toString().split('') : []
    //         personCount.value = res.data.personCount ? res.data.personCount.toString().split('') : []
    //     }
    // })
    // getResearchData().then(res => {
    //     if (res.code == 200) {
    //         naturalData.value = res.data
    //     }
    // })
    // getHighlandData().then(res => {
    //     if (res.code == 200) {
    //         nowCount.value = res.data.nowCount ? res.data.nowCount.toString().split('') : []
    //         monthCount.value = res.data.monthCount ? res.data.monthCount.toString().split('') : []
    //         topFive.value = res.data.topFive
    //     }
    // })
}
const gotoPath = (path, query) => {
    router.push({
        path: path,
        query: query,
    })
}
const toPagePeople = (id) => {
    router.push({
        path: '/bigScreen/resourcesExpert',
        query: {
            id: id,
            personType: '0'
        }
    })
}
const goOrgDetail = (id) => {
    router.push({
        path: '/bigScreen/resourcesOrganization',
        query: {
            id: id
        }
    })
}
const toHighland = (id) => {
    router.push({
        path: '/bigScreen/highlandDetail',
        query: {
            id: id
        }
    })
}

const openInstrument = () => {
    window.open("https://f.nmkjt.org.cn/dykf/nldoRunT.action?handler=webnl.webIndex")
}

onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
.box-con {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    flex-wrap: wrap;
    overflow: hidden;

    .con-main {
        width: calc((100% - 3rem) / 3);
        height: calc((100% - 2rem) / 2);

        .main-box {
            height: calc(100% - 4.5rem);
            // background-image: url("../../../../../assets/bigScreen/square-bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 1px solid #07294c;

            .topTotal {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 3rem;

                .topTotal-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .topTotal-item-title {
                        font-size: 1.3rem;
                        color: #2DCCFF;
                        margin-top: 0.5rem;
                    }

                    .numberBox {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 4rem;
                        margin-top: 1rem;
                        .number {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 3rem;
                            height: 100%;
                            font-size: 3.2rem;
                            border-radius: 0.5rem;
                            text-align: center;
                            font-family: "ffa";
                            background: #052557;
                            margin-left: 0.5rem;
                        }
                    }
                }
            }

            .num-box {
                padding: 1rem 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
                box-sizing: border-box;

                .num-li {
                    background: #021536;
                    box-sizing: border-box;
                    cursor: pointer;
                    // border: 0.1rem solid #02325a;
                    border-radius: 0.6rem;
                    // display: flex;
                    // align-items: center;
                    // justify-content: space-between;
                    // padding-left: 1rem;
                    padding-right: 0;
                    padding: 0 1rem;

                    .num-li-l {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 2rem;
                        font-weight: normal;
                        line-height: 2rem;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        letter-spacing: 0;
                        color: #ffffff;
                        padding: 1rem 0;

                        img {
                            width: 8rem;
                            height: 8rem;
                            margin-right: 1.5rem;
                        }
                    }

                    .num-li-r {
                        width: 40%;
                        // height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        // border-left: 0.1rem solid #02325a;
                        margin: auto;
                        .num {
                            // background-image: url("../../../../../assets/bigScreen/num-bg.png");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            // color: #ffdd03;
                            font-size: 3.2rem;
                            // width: 8rem;
                            height: 3.5rem;
                            line-height: 3.5rem;
                            border-radius: 0.5rem;
                            // background: #052557;
                            // border: 0.1rem solid rgba(45, 204, 255, 0.25);
                            // box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                            text-align: center;
                            font-family: "ffa";
                            margin: 0 0.2rem;
                            z-index: 10;
                            letter-spacing: 2rem;
                            padding-left: 2rem;
                        }
                        .numBgBox {
                            position: absolute;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin: auto;
                        }
                        .numBg {
                            background-image: url("../../../../assets/bigScreen/num-bg.png");
                            background: #052557;
                            border: 0.1rem solid rgba(45, 204, 255, 0.25);
                            box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                            width: 3rem;
                            height: 3.5rem;
                            line-height: 5.5rem;
                            margin: 0 0.2rem;
                            z-index: 0;
                        }
                        // div {
                        //     background-image: url("../../../../../assets/bigScreen/num-bg.png");
                        //     background-size: 100% 100%;
                        //     background-repeat: no-repeat;
                        //     color: #ffdd03;
                        //     font-size: 3.2rem;
                        //     width: 8rem;
                        //     height: 5.5rem;
                        //     line-height: 5.5rem;
                        //     border-radius: 0.5rem;
                        //     background: #052557;
                        //     border: 0.1rem solid rgba(45, 204, 255, 0.25);
                        //     box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                        //     text-align: center;
                        //     font-family: "ffa";
                        //     margin: 0 0.2rem;
                        // }
                    }

                    .color-lan {
                        div {
                            color: #02fbfd;
                        }
                    }

                    .color-lv {
                        div {
                            color: #89ff3b;
                        }
                    }
                }
            }
            .ct-numk {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .ct-numk-t {
                    padding: 1rem 2rem;
                    h5 {
                        font-size: 1.6rem;
                        font-weight: 500;
                        line-height: 2.5rem;
                        letter-spacing: 0;
                        color: #ffffff;
                        padding-left: 0.8rem;
                        border-left: 0.3rem solid #02e1e2;
                    }
                    .ct-numk-con {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .ctnumk-li {
                            background-image: url("../../../../assets/bigScreen/ctnum-bgimg.png");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            width: 18rem;
                            height: 10rem;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            .ctnum {
                                display: flex;
                                justify-content: center;
                                color: #ffdd03;
                                div {
                                    font-size: 3rem;
                                    font-weight: normal;
                                    line-height: 3.2rem;
                                    letter-spacing: 0;
                                    background-image: url("../../../../assets/bigScreen/ctnum-bg1.png");
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    width: 2.4rem;
                                    height: 3.7rem;
                                    line-height: 3.7rem;
                                    text-align: center;
                                    margin: 0 0.05rem;
                                }
                            }
                            .cttit {
                                font-size: 1.2rem;
                                font-weight: normal;
                                line-height: 1.7rem;
                                text-align: center;
                                letter-spacing: 0;
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
            .lb-box {
                display: flex;
                flex-wrap: wrap;
                padding: 1rem 0;
                height: 100%;
                .lb-box-l {
                    width: 50%;
                    height: 100%;
                    .lbbox-l-t {
                        width: 13.9rem;
                        height: 14.4rem;
                        background-image: url("../../../../assets/bigScreen/lbtl-bg.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        color: #fff;
                        font-size: 2.4rem;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        margin: auto;
                        animation: breathing 3s ease-in-out infinite;
                        p {
                            margin: 0;
                            font-size: 1.4rem;
                            font-weight: normal;
                            line-height: 2.4rem;
                            text-align: center;
                            letter-spacing: 0;
                            color: #d0deee;
                        }
                    }

                    @keyframes breathing {
                        0% {
                            transform: scale(1);
                        }
                        50% {
                            transform: scale(0.9);
                        }
                        100% {
                            transform: scale(1);
                        }
                    }

                    .lbbox-r-t {
                        background-image: url("../../../../assets/bigScreen/lbtr-bg.png");
                    }
                    .lbbox-l-b {
                        padding: 0 1rem 0 2rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        margin-top: 1rem;
                        height: calc(100% - 14.4rem - 1rem);
                        .lbbox-li {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            margin-bottom: 0.7rem;
                            padding: 0.7rem;
                            background: #061d44;
                            position: relative;
                            .lbbox-imgk {
                                width: 6rem;
                                height: 6.5rem;
                                position: relative;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                                div {
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    width: 100%;
                                    height: 2rem;
                                    font-size: 1rem;
                                    font-weight: normal;
                                    letter-spacing: 0;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 2rem;
                                    background: rgba(91, 198, 200, 0.37);
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            .lbbox-textk {
                                margin-left: 1rem;
                                width: calc(100% - 7.5rem);
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;
                                h6 {
                                    font-size: 1.6rem;
                                    font-weight: normal;
                                    letter-spacing: 0;
                                    color: #00e6ff;
                                    margin: 0;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                div {
                                    font-size: 1.2rem;
                                    font-weight: normal;
                                    letter-spacing: 0;
                                    color: rgba(255, 255, 255, 0.54);
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            .tags {
                                font-size: 1rem;
                                font-weight: normal;
                                letter-spacing: 0;
                                color: #02fbfd;
                                padding: 0.2rem 0.5rem;
                                border-radius: 0.2rem;
                                background: rgba(38, 77, 112, 0.37);
                                border: 0.1rem solid rgba(2, 251, 253, 0.23);
                                position: absolute;
                                top: 0.8rem;
                                right: 0.8rem;
                            }
                        }
                    }
                }
            }
            .cb-box {
                padding: 1rem;
                // display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
                overflow: hidden;
                .cb-box-t {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    float: left;
                    width: 30%;
                    height: 46.5%;
                    margin: 1%;
                    .cbbox-t-box {
                        h6 {
                            margin: 0;
                            font-size: 1.6rem;
                            font-weight: normal;
                            line-height: 2.2rem;
                            letter-spacing: 0;
                            color: #ffffff;
                            text-align: center;
                        }
                        .cbbox-t-numk {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-top: 1rem;
                            color: #ffdd03;
                            div {
                                width: 3.9rem;
                                height: 5rem;
                                background: linear-gradient(
                                    0deg,
                                    #021536 10%,
                                    rgba(2, 21, 54, 0.26) 100%
                                );
                                box-sizing: border-box;
                                border: 1px solid;
                                border-image: linear-gradient(
                                        180deg,
                                        #4192d9 2%,
                                        rgba(65, 146, 217, 0.3) 34%,
                                        rgba(65, 146, 217, 0.3) 68%,
                                        #4192d9 100%
                                    )
                                    1;
                                box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44),
                                    inset 0px 5px 20px 0.5px
                                        rgba(43, 46, 52, 0.56);
                                margin: 0 0.3rem;
                                text-align: center;
                                line-height: 5rem;
                                font-size: 3rem;
                                font-weight: normal;
                                letter-spacing: 0;
                                text-shadow: 0 0.4rem 1rem 0
                                    rgba(255, 221, 3, 0.44);
                            }
                        }
                    }
                }

                .cbbox-b-conli {
                    // width: calc((100% - 4rem) / 3);
                    float: left;
                    width: 30%;
                    height: 46.5%;
                    margin: 1%;
                    background-color: #061d44;
                    padding: 0.5rem 1rem;
                    h6 {
                        display: flex;
                        align-items: center;
                        margin: 0;
                        img {
                            width: 2.1rem;
                            height: 2.1rem;
                        }
                        span {
                            font-size: 1.4rem;
                            font-weight: normal;
                            letter-spacing: 0;
                            color: #00e6ff;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .cbbox-b-conli-imgk {
                        margin-top: 1rem;
                        height: 8rem;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p {
                        font-size: 1.2rem;
                        font-weight: normal;
                        letter-spacing: 0;
                        color: rgba(255, 255, 255, 0.54);
                        margin-top: 0.7rem;
                        margin-bottom: 0;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .cb-box-b {
                    padding: 1rem;
                    float: left;
                    width: 30%;
                    height: 50%;
                    h5 {
                        font-size: 1.6rem;
                        font-weight: 500;
                        line-height: 2.5rem;
                        letter-spacing: 0;
                        color: #ffffff;
                        padding-left: 0.8rem;
                        border-left: 0.3rem solid #02e1e2;
                        margin-bottom: 0;
                    }
                    .cbbox-b-con {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        flex-wrap: wrap;
                    }
                }
            }
        }
    }
    .con-main:nth-child(n + 4) {
        margin-top: 2rem;
    }
}
.h4s {
    height: 4.5rem;
    line-height: 4.5rem;
    background-image: url("../../../../assets/bigScreen/title-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem 0.3rem 4.7rem;
    box-sizing: border-box;

    .tit-l {
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 2.6rem;
        letter-spacing: 0;
        color: #ffffff;
        text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

        span {
            font-size: 1.4rem;
            letter-spacing: 0;
            color: rgba(255, 255, 255, 0.62);
            margin-left: 1.8rem;
        }
    }

    .tit-r {
        display: flex;
        align-items: center;
    }
    .more {
        font-size: 1.2rem;
        font-weight: normal;
        line-height: 2.6rem;
        letter-spacing: 0rem;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
        cursor: pointer;
    }
}
::v-deep .searchk .ant-picker {
    background-color: inherit;
    border: 0.1rem solid rgba(2, 251, 253, 0.3);
    padding: 0rem 1rem !important;
}
::v-deep .searchk .ant-picker-input > input {
    color: #02fbfd;
}
</style>

